<template>
	<el-dialog title="本账期应发返点" :visible.sync="visible">
		
    <div>
      <el-tabs v-model="activeTab">
        <el-tab-pane
         v-for="(item, index) in tabs"
          :key="index"
          :label="dayjs(item.label.toString()).format('YYYY-MM-DD')"
          :name="item.value"
        />
      </el-tabs>
      <Table
        :tableData="getTypeData('club')"
        :tableLoading="loading"
        :columns="columns1"
      />
		 <Table
        :tableData="getTypeData('insurance')"
        :tableLoading="loading"
        :columns="getColumns2()"
      />
		<Table
      :tableData="getTypeData('add')"
        :tableLoading="loading"
        :columns="getColumns3()"
      /> 
		<Table
			:tableData="getTypeData(['zr', 'ty', 'dj', 'qp', 'cp', 'dy'])"
			:tableLoading="loading"
			:columns="getColumns4()"
		/>
    </div>
	</el-dialog>
</template>

<script>
import Table from './table'
import {columns1, getColumns2, getColumns3, getColumns4 } from './columns'
import dayjs from 'dayjs'

export default {
  components: {
    Table
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: undefined
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      dayjs,
      columns1,
      getColumns2,
      getColumns3,
      getColumns4,
      activeTab: 0,
      dataList: [],

      projectNams: {
        club: '德州俱乐部',
        insurance: '德州保险',
        add: '德州增值服务',
        'zr': '真人',
        'ty': '体育',
        'dj': '电竞',
        'qp': '棋牌',
        'cp': '彩票',
        'dy': '电子'
      }
    }
  },
  watch: {
    value: {
      handler(val) {
        this.visible = val
      },
      immediate: true
    },
    visible(newVal) {
      this.$emit('input', newVal)
    },
  },
  computed: {
    tabs() {
      return this.dataList
       .sort((a, b) => {
        return a.reportYm - b.reportYm
      }).map((item, index) => {
        return {
          label: item.reportYm,
          value: index
        }
      }) || []
    },
    activeData() {
      return this.dataList[this.activeTab] || {}
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    async loadData() {
      this.loading = true
      try {
        const res = await this.$api
          .reconciliationAdsProxyReconciliationDetail({
            cycleStartDate: this.row.cycleStartDate,
            cycleEndDate: this.row.cycleEndDate,
            proxyId: this.row.proxyId
          })

          if (res.code === 200 && res.data) {
            this.dataList = res.data.record || []
          }
      } finally {
        this.loading = false
      }
    
    },

    getTypeData(type) {
      if (Array.isArray(type)) {
          return type.map(type => {


            return {
                name: this.projectNams[type],
                validBetAmount: this.activeData[`${type}ValidBetAmount`],
                teamPartsRate: this.activeData[`${type}TeamPartsRate`],
                teamPartsAmount: this.activeData[`${type}TeamPartsAmount`],
                rebateAmount: this.activeData[`${type}RebateAmount`],
            }
        })
      }
     
      return [{
          name: this.projectNams[type],
          ...this.activeData,
        }]
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
